<template>
  <div class="user-container">
    <!-- 修改密码 -->
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>修改密码</strong>
      <i class="myMsg"></i>
    </div>
    <div class="from-container">
      <form>
        <div class="cell-list">
          <div class="cell-item">
            <div class="left">
              <i class="iconfont icon-mima"></i>
            </div>
            <div class="right">
              <input name="oldPwd" :type="resetPwdForm.oldPwdFormType" v-model="resetPwdForm.oldPwd" placeholder="请输入原始密码" autocomplete="off">
            </div>
            <i class="clear" v-show="resetPwdForm.oldPwd.length>0" @click="resetPwdForm.oldPwd=''" style="right: 40px;"></i>
            <i :class="['eye-icon', resetPwdForm.oldPwdFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
              @click="resetPwdForm.oldPwdFormType=resetPwdForm.oldPwdFormType=='password'?'text':'password'"></i>
          </div>
          <div class="cell-item">
            <div class="left">
              <i class="iconfont icon-mima"></i>
            </div>
            <div class="right">
              <input name="newPwd" :type="resetPwdForm.newPwdFormType" v-model="resetPwdForm.newPwd" placeholder="设置登录密码" autocomplete="off">
            </div>
            <i class="clear" v-show="resetPwdForm.newPwd.length>0" @click="resetPwdForm.newPwd=''" style="right: 40px;"></i>
            <i :class="['eye-icon', resetPwdForm.newPwdFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
              @click="resetPwdForm.newPwdFormType=resetPwdForm.newPwdFormType=='password'?'text':'password'"></i>
          </div>
          <div class="cell-item">
            <div class="left">
              <i class="iconfont icon-mima"></i>
            </div>
            <div class="right">
              <input name="confirNewPwd" :type="resetPwdForm.passwordConfirmFormType" v-model="resetPwdForm.confirmpassword" placeholder="请重复登录密码"
                autocomplete="off">
            </div>
            <i class="clear" v-show="resetPwdForm.confirmpassword.length>0" @click="resetPwdForm.confirmpassword=''" style="right: 40px;"></i>
            <i :class="['eye-icon', resetPwdForm.passwordConfirmFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
              @click="resetPwdForm.passwordConfirmFormType=resetPwdForm.passwordConfirmFormType=='password'?'text':'password'"></i>
          </div>
        </div>
      </form>
      <div class="notice">{{errMessage}}</div>
      <div class="cell-box">
        <div :class="['cell-btn',resetPwdForm.oldPwd==''||resetPwdForm.newPwd==''||resetPwdForm.confirmpassword==''?'disabled-btn':'']"
          @click="()=>{resetPwdForm.oldPwd==''||resetPwdForm.newPwd==''||resetPwdForm.confirmpassword==''?false:handleSubmit()}">确认</div>
      </div>
      <div class="service" @click="$router.push('/forget')">
        忘记密码？
      </div>
    </div>
    <!-- 忘记密码 -->
  </div>
</template>
<script>
  import {
    updateUserPwd
  } from '@/api/user'
  import {
    mapGetters
  } from 'vuex'
  import {
    encryptString
  } from '@/utils/mixin'
  import {
    Toast
  } from 'mint-ui'
  // import * as Validate from '@/utils/validate'
  export default {
    data() {
      return {
        errMessage: '',
        visiblePopup: {
          forget: true
        },
        resetPwdForm: {
          oldPwd: '',
          newPwd: '',
          confirmpassword: '',
          oldPwdFormType: 'password',
          newPwdFormType: 'password',
          passwordConfirmFormType: 'password'
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      handleSubmit() {
        if (this.resetPwdForm.newPwd !== this.resetPwdForm.confirmpassword) {
          this.errMessage = '设置新密码不一致'
          return false
        }
        const formData = {
          oldPwd: encryptString(this.resetPwdForm.oldPwd),
          newPwd: encryptString(this.resetPwdForm.newPwd),
          userId: this.userInfo.id
        }
        updateUserPwd(formData).then(res => {
          Toast({
            message: '修改成功请重新登录'
          })
          this.$store.dispatch('FedLogOut')
          this.$router.push('/home')
        }).catch(err => {
          Toast({
            message: err.info,
            position: 'bottom'
          })
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';  
  .user-container {
    background: #ffffff;
    @include wh(10rem, 100%);
    .clear {
      width: 16px;
      height: 16px;
      margin: 0;
      position: absolute;
      right: 10px;
      @include bg('~assets/common/images/close.png');
    }

    .my-header {
      padding: $padding;
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      margin-bottom: 30px;
      .back {
        display: block;
        width: .65rem;
        height: .65rem;
        font-size: 18px; // background: url('~assets/common/images/arrow-left.png') no-repeat;
        // background-size: 100%;
      }
      strong {
        font-size: 18px;
        font-weight: normal;
        color: #333;
      }
      .myMsg {
        display: block;
        width: .65rem;
        height: .65rem;
      }
      .register-btn {
        font-size: $subtitle;
        border: 1px solid #ffffff;
        border-radius: 14px;
        color: #ffffff;
        height: 28px;
        line-height: 28px;
        width: 50px; // color:#333;
        // display: block;
        // height: .65rem;
        // width: .65rem;
      }
    }
  }

  .from-container {
    padding: 1rem;
    .cell-list {
      .cell-item {
        @include flexbox(flex-start,
        center,
        row,
        nowrap);
        border-bottom: 1px solid #eee;
        padding: $padding $padding $padding 0;
        margin: $margin 0;
        position: relative;
        .left {
          i {
            position: absolute;
            font-size: 24px;
            top: 5px;
          }
        }
        .right {
          width: 80%;
          margin-left: 40px;
          @include placeholderColor($gray);
          input {
            width: 100%;
            border: none;
            outline: none;
            box-shadow: none;
            text-shadow: none;
            text-align: left;
            font-size: $title;
            color: #333;
          }
          .arrow-right {
            display: block;
            width: 16px;
            height: 20px;
            background: url('~assets/common/images/arrow-right.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
    .other-link {
      @include flexbox(flex-end,
      center,
      row,
      nowrap);
      font-size: 15px;
      color: $gray;
      margin: $margin auto;
    }
  }


  .notice {
    font-size: 13px;
    line-height: 1.5;
    color: #f23030;
    text-align: left;
  }

  .service {
    margin-top: 2rem;
    color: #777777;
    font-size: 14px;
    position: relative;
    text-align: center;
    a {
      text-decoration: underline;
      color: #333;
    }
  }

</style>
